React Suspense 리소스 풀: 효율적인 공유 데이터 로딩 관리

React Suspense는 React 16.6에 도입된 강력한 메커니즘으로, 데이터 페칭과 같은 비동기 작업이 완료되기를 기다리는 동안 컴포넌트 렌더링을 "일시 중단"할 수 있게 해줍니다. 이는 로딩 상태를 보다 선언적이고 효율적으로 처리하고 사용자 경험을 개선하는 문을 열어줍니다. Suspense 자체도 훌륭한 기능이지만, 리소스 풀(Resource Pool) 패턴과 결합하면 특히 여러 컴포넌트에서 공유 데이터를 다룰 때 훨씬 더 큰 성능 향상을 이끌어낼 수 있습니다.

React Suspense 이해하기

리소스 풀 패턴을 살펴보기 전에, React Suspense의 기본 사항을 빠르게 복습해 보겠습니다:

• 데이터 페칭을 위한 Suspense: Suspense는 필요한 데이터가 사용 가능해질 때까지 컴포넌트 렌더링을 일시 중지할 수 있게 합니다.
• 에러 바운더리(Error Boundaries): Suspense와 함께 에러 바운더리를 사용하면 데이터 페칭 과정에서 발생하는 오류를 우아하게 처리하고, 실패 시 대체 UI를 제공할 수 있습니다.
• 컴포넌트 지연 로딩(Lazy Loading): Suspense는 컴포넌트의 지연 로딩을 가능하게 하여, 필요할 때만 컴포넌트를 로드함으로써 초기 페이지 로드 시간을 개선합니다.

Suspense를 사용하는 기본 구조는 다음과 같습니다:

<Suspense fallback={<p>Loading...</p>}>
  <MyComponent />
</Suspense>

이 예시에서 MyComponent는 비동기적으로 데이터를 가져올 수 있습니다. 데이터가 즉시 사용 가능하지 않으면 fallback prop, 이 경우 로딩 메시지가 표시됩니다. 데이터가 준비되면 MyComponent가 렌더링됩니다.

과제: 중복 데이터 페칭

복잡한 애플리케이션에서는 여러 컴포넌트가 동일한 데이터에 의존하는 경우가 많습니다. 순진한 접근 방식은 각 컴포넌트가 필요한 데이터를 독립적으로 가져오도록 하는 것입니다. 그러나 이는 중복된 데이터 페칭으로 이어져 네트워크 리소스를 낭비하고 잠재적으로 애플리케이션 속도를 저하시킬 수 있습니다.

사용자 정보를 표시하는 대시보드가 있고, 사용자 프로필 섹션과 최근 활동 피드 모두 사용자의 세부 정보에 접근해야 하는 시나리오를 생각해 보세요. 각 컴포넌트가 자체적으로 데이터 페치를 시작하면, 본질적으로 동일한 정보에 대해 두 번의 동일한 요청을 보내는 셈입니다.

리소스 풀 패턴 소개

리소스 풀 패턴은 중앙 집중식 데이터 리소스 풀을 생성하여 이 문제에 대한 해결책을 제공합니다. 각 컴포넌트가 독립적으로 데이터를 가져오는 대신, 풀에서 공유 리소스에 대한 접근을 요청합니다. 리소스가 이미 사용 가능한 경우(즉, 데이터가 이미 페치된 경우) 즉시 반환됩니다. 리소스가 아직 사용 가능하지 않은 경우, 풀은 데이터 페치를 시작하고 완료되면 모든 요청 컴포넌트에 이를 제공합니다.

이 패턴은 여러 가지 장점을 제공합니다:

• 중복 페칭 감소: 여러 컴포넌트가 데이터를 필요로 하더라도 데이터가 한 번만 페치되도록 보장합니다.
• 성능 향상: 네트워크 오버헤드를 줄이고 전반적인 애플리케이션 성능을 향상시킵니다.
• 중앙 집중식 데이터 관리: 데이터에 대한 단일 진실 공급원(single source of truth)을 제공하여 데이터 관리와 일관성을 단순화합니다.

React Suspense로 리소스 풀 구현하기

React Suspense를 사용하여 리소스 풀 패턴을 구현하는 방법은 다음과 같습니다:

1. 리소스 팩토리 생성: 이 팩토리 함수는 데이터 페칭 프로미스(promise)를 생성하고 Suspense에 필요한 인터페이스를 노출하는 역할을 합니다.
2. 리소스 풀 구현: 풀은 생성된 리소스를 저장하고 그 생명주기를 관리합니다. 또한 각 고유 리소스에 대해 단 하나의 페치만 시작되도록 보장합니다.
3. 컴포넌트에서 리소스 사용: 컴포넌트는 풀에서 리소스를 요청하고 React.use를 사용하여 데이터를 기다리는 동안 렌더링을 일시 중단합니다.

1. 리소스 팩토리 생성하기

리소스 팩토리는 데이터 페칭 함수를 입력으로 받아 React.use와 함께 사용할 수 있는 객체를 반환합니다. 이 객체는 일반적으로 데이터를 반환하거나, 데이터가 아직 사용 가능하지 않은 경우 프로미스를 던지는(throw) read 메소드를 가집니다.

function createResource(fetchData) {
  let status = 'pending';
  let result;
  let suspender = fetchData().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

설명:

• createResource 함수는 fetchData 함수를 입력으로 받습니다. 이 함수는 데이터로 resolve되는 프로미스를 반환해야 합니다.
• status 변수는 데이터 페칭 상태('pending', 'success', 'error')를 추적합니다.
• suspender 변수는 fetchData가 반환한 프로미스를 보유합니다. then 메소드는 프로미스가 resolve되거나 reject될 때 status와 result 변수를 업데이트하는 데 사용됩니다.
• read 메소드는 Suspense와 통합하는 핵심입니다. status가 'pending'이면 suspender 프로미스를 던져 Suspense가 렌더링을 일시 중단하도록 합니다. status가 'error'이면 에러를 던져 에러 바운더리가 이를 잡을 수 있게 합니다. status가 'success'이면 데이터를 반환합니다.

2. 리소스 풀 구현하기

리소스 풀은 생성된 리소스를 저장하고 관리하는 역할을 합니다. 각 고유 리소스에 대해 단 하나의 페치만 시작되도록 보장합니다.

const resourcePool = {
  cache: new Map(),
  get(key, fetchData) {
    if (!this.cache.has(key)) {
      this.cache.set(key, createResource(fetchData));
    }
    return this.cache.get(key);
  },
};

설명:

• resourcePool 객체는 생성된 리소스를 저장하는 Map인 cache 속성을 가집니다.
• get 메소드는 key와 fetchData 함수를 입력으로 받습니다. key는 리소스를 고유하게 식별하는 데 사용됩니다.
• 리소스가 캐시에 아직 없으면 createResource 함수를 사용하여 생성하고 캐시에 추가합니다.
• 그런 다음 get 메소드는 캐시에서 리소스를 반환합니다.

3. 컴포넌트에서 리소스 사용하기

이제 React 컴포넌트에서 리소스 풀을 사용하여 데이터에 접근할 수 있습니다. React.use 훅을 사용하여 리소스에서 데이터에 접근하세요. 데이터가 아직 사용 가능하지 않은 경우 컴포넌트를 자동으로 일시 중단합니다.

import React from 'react';

function MyComponent({ userId }) {
  const userResource = resourcePool.get(userId, () => fetchUser(userId));
  const user = React.use(userResource).user;

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

function fetchUser(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then((response) =>
    response.json()
  ).then(data => ({user: data}));
}

export default MyComponent;

설명:

• MyComponent 컴포넌트는 userId prop을 입력으로 받습니다.
• resourcePool.get 메소드는 풀에서 사용자 리소스를 가져오는 데 사용됩니다. key는 userId이고, fetchData 함수는 fetchUser입니다.
• React.use 훅은 userResource에서 데이터에 접근하는 데 사용됩니다. 데이터가 아직 사용 가능하지 않은 경우 이 훅이 컴포넌트를 일시 중단합니다.
• 그런 다음 컴포넌트는 사용자의 이름과 이메일을 렌더링합니다.

마지막으로, 로딩 상태를 처리하기 위해 컴포넌트를 <Suspense>로 감싸줍니다:

<Suspense fallback={<p>Loading user profile...</p>}>
  <MyComponent userId={123} />
</Suspense>

고급 고려사항

캐시 무효화

실제 애플리케이션에서는 데이터가 변경될 수 있습니다. 데이터가 업데이트될 때 캐시를 무효화하는 메커니즘이 필요합니다. 여기에는 풀에서 리소스를 제거하거나 리소스 내의 데이터를 업데이트하는 것이 포함될 수 있습니다.

resourcePool.invalidate = (key) => {
  resourcePool.cache.delete(key);
};

오류 처리

Suspense는 로딩 상태를 우아하게 처리할 수 있게 해주지만, 오류를 처리하는 것도 똑같이 중요합니다. 데이터 페칭 또는 렌더링 중에 발생하는 모든 오류를 잡기 위해 컴포넌트를 에러 바운더리로 감싸세요.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 상태를 업데이트합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 오류를 오류 보고 서비스에 기록할 수도 있습니다.
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 사용자 정의 대체 UI를 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

<ErrorBoundary>
  <Suspense fallback={<p>Loading user profile...</p>}>
    <MyComponent userId={123} />
  </Suspense>
</ErrorBoundary>

SSR 호환성

서버 사이드 렌더링(SSR)과 함께 Suspense를 사용할 때는 컴포넌트를 렌더링하기 전에 서버에서 데이터가 페치되었는지 확인해야 합니다. 이는 react-ssr-prepass와 같은 라이브러리를 사용하거나 수동으로 데이터를 페치하여 컴포넌트에 props로 전달함으로써 달성할 수 있습니다.

전역 컨텍스트와 국제화

글로벌 애플리케이션에서는 리소스 풀이 언어 설정이나 사용자 기본 설정과 같은 전역 컨텍스트와 어떻게 상호 작용하는지 고려해야 합니다. 페치된 데이터가 적절하게 현지화되었는지 확인하세요. 예를 들어, 제품 세부 정보를 페치하는 경우 설명과 가격이 사용자가 선호하는 언어와 통화로 표시되도록 해야 합니다.

예시:

import { useContext } from 'react';
import { LocaleContext } from './LocaleContext';

function ProductComponent({ productId }) {
  const { locale, currency } = useContext(LocaleContext);
  const productResource = resourcePool.get(`${productId}-${locale}-${currency}`, () =>
    fetchProduct(productId, locale, currency)
  );
  const product = React.use(productResource);

  return (
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>Price: {product.price} {currency}</p>
    </div>
  );
}

async function fetchProduct(productId, locale, currency) {
  // 현지화된 제품 데이터 페칭 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 500)); // 네트워크 지연 시뮬레이션
  const products = {
    '123-en-USD': { name: 'Awesome Product', description: 'A fantastic product!', price: 99.99 },
    '123-fr-EUR': { name: 'Produit Génial', description: 'Un produit fantastique !', price: 89.99 },
  };

  const key = `${productId}-${locale}-${currency}`;
  if (products[key]) {
    return products[key];
  } else {
    // 영어 USD로 폴백
    return products['123-en-USD'];
  }
}

이 예시에서 LocaleContext는 사용자가 선호하는 언어와 통화를 제공합니다. 리소스 키는 productId, locale, currency를 사용하여 구성되어 올바른 현지화된 데이터가 페치되도록 보장합니다. fetchProduct 함수는 제공된 로케일과 통화를 기반으로 현지화된 제품 데이터를 페치하는 것을 시뮬레이션합니다. 현지화된 버전이 없는 경우 기본값(이 경우 영어/USD)으로 폴백됩니다.

장점과 단점

장점

• 성능 향상: 중복 데이터 페칭을 줄이고 전반적인 애플리케이션 성능을 향상시킵니다.
• 중앙 집중식 데이터 관리: 데이터에 대한 단일 진실 공급원을 제공하여 데이터 관리와 일관성을 단순화합니다.
• 선언적 로딩 상태: Suspense를 사용하면 선언적이고 조합 가능한 방식으로 로딩 상태를 처리할 수 있습니다.
• 향상된 사용자 경험: 눈에 거슬리는 로딩 상태를 방지하여 더 부드럽고 반응성이 좋은 사용자 경험을 제공합니다.

단점

• 복잡성: 리소스 풀을 구현하면 애플리케이션에 복잡성이 추가될 수 있습니다.
• 캐시 관리: 데이터 일관성을 보장하기 위해 신중한 캐시 관리가 필요합니다.
• 과도한 캐싱 가능성: 제대로 관리하지 않으면 캐시가 오래되어 오래된 데이터가 표시될 수 있습니다.

리소스 풀의 대안

리소스 풀 패턴이 좋은 해결책을 제공하지만, 특정 요구 사항에 따라 고려할 다른 대안도 있습니다:

• Context API: React의 Context API를 사용하여 컴포넌트 간에 데이터를 공유합니다. 이는 리소스 풀보다 간단한 접근 방식이지만, 데이터 페칭에 대한 동일한 수준의 제어를 제공하지는 않습니다.
• Redux 또는 기타 상태 관리 라이브러리: Redux와 같은 상태 관리 라이브러리를 사용하여 중앙 집중식 저장소에서 데이터를 관리합니다. 이는 데이터가 많은 복잡한 애플리케이션에 좋은 옵션입니다.
• GraphQL 클라이언트 (예: Apollo Client, Relay): GraphQL 클라이언트는 중복 페칭을 피하는 데 도움이 되는 내장 캐싱 및 데이터 페칭 메커니즘을 제공합니다.

결론

React Suspense 리소스 풀 패턴은 React 애플리케이션에서 데이터 로딩을 최적화하는 강력한 기술입니다. 컴포넌트 간에 데이터 리소스를 공유하고 선언적 로딩 상태를 위해 Suspense를 활용함으로써 성능을 크게 향상시키고 사용자 경험을 개선할 수 있습니다. 약간의 복잡성이 추가되지만, 특히 공유 데이터가 많은 복잡한 애플리케이션에서는 그 이점이 비용을 능가하는 경우가 많습니다.

리소스 풀을 구현할 때 캐시 무효화, 오류 처리 및 SSR 호환성을 신중하게 고려해야 합니다. 또한 Context API나 상태 관리 라이브러리와 같은 대안적인 접근 방식을 탐색하여 특정 요구에 가장 적합한 해결책을 결정하세요.

React Suspense와 리소스 풀 패턴의 원칙을 이해하고 적용함으로써, 전 세계 사용자를 위한 더 효율적이고 반응성이 뛰어나며 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다.